<!--
 * @Author: [yuantongxin]
 * @Date: 2021-09-22 09:02:03
 * @LastEditors: [yuantongxin]
 * @LastEditTime: 2021-09-22 18:51:11
 * @Description: 
-->
<template>
<!-- 2. -->
  <div ref="root" style="height:160px">

  </div>
</template>

<script>
// 1.
import { Pie } from '@antv/g2plot';

export default {
  data(){
    return{}
  },
  methods:{
    initCharts(){
      const data = [
        { type: '旅游产业', value: 27 },
        { type: '医药产业', value: 25 },
        { type: '互联网产业', value: 18 },
        { type: '高新技术', value: 15 },
        { type: '教育', value: 10 },
        { type: '其他', value: 5 },
      ];

      const piePlot = new Pie(this.$refs['root'], {
        appendPadding: 10,
        data,
        angleField: 'value',
        colorField: 'type',
        radius: 1,
        innerRadius: 0.64,
        
        meta: {
          value: {
            formatter: (v) => `¥ ${v}`,
          },
        },
        label: {
          type: 'inner',
          offset: '-50%',
          autoRotate: false,
          style: { textAlign: 'center' },
          formatter: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
        },
        statistic: {
          title: {
            offsetY: -8,
          },
          content: {
            offsetY: -4,
          },
        },
        // 添加 中心统计文本 交互
        interactions: [
          { type: 'element-selected' },
          { type: 'element-active' },
          {
            type: 'pie-statistic-active',
            cfg: {
              start: [
                { trigger: 'element:mouseenter', action: 'pie-statistic:change' },
                { trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
              ],
              end: [
                { trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
                { trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
              ],
            },
          },
        ],
      });
      // 4.
      piePlot.render();
    }
  },
  mounted(){
    this.initCharts()
  }
}
</script>

